<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{URL::asset('js/echarts.js')}}"></script>
<script src="{{URL::asset('js/customed.js')}}"></script>
<script src="{{URL::asset('js/jspdf.min.js')}}"></script>
<script src="{{URL::asset('js/html2canvas.js')}}"></script>
<script src="{{URL::asset('js/jquery.js')}}"></script>
<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}">

<style>
    .headDiv{
        height: 10mm;
        width: 210mm;
    }

    .area{
        height:30mm;
        width:180mm;
        background:none;
        resize:none;
        font-size:18px;
        margin-left: 15mm;
        margin-right:30mm;
        margin-top:5mm;
        margin-bottom:5mm;
        border: 3px solid #ffffff;
        border-radius: 15px;
        color: #ffffff;
        padding: 2mm 8mm 2mm 8mm;
        float: left;
    }

    .DivF1{
        height: 100mm;
        width: 130mm;
        margin: 0 auto;
        margin: auto auto auto 10mm;
        float: left;
    }

    .DivF2{
        height: 60mm;
        width: 70mm;
        margin: 40mm auto 0 auto;
        float: left;
        font-size:18px;
        color: #ffffff;
    }

    .DivS_1{
        height: 74mm;
        width: 100mm;
        margin: 0 auto 0 10mm;
        float: left;
    }
    .DivS_2{
        height: 74mm;
        width: 100mm;
        margin: 0 auto;
        float: left;
    }

    .DivS_3{
        height:22mm;
        width:180mm;
        background:none;
        resize:none;
        font-size:18px;
        margin-left: 15mm;
        margin-right:30mm;
        margin-top:5mm;
        color: #ffffff;
        padding: 2mm 8mm 2mm 8mm;
        float: left;
    }
</style>
<div class="modal fade" id="loadingModal">
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5>正在加载...</h5>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var url = window.location.href;
        pid = url.split('=')[1];

/*
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
        $('#loadingModal').modal();*/

        var request = {id:pid};
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
        $.post('/admin/kly_report_get',request,function(e){
            var stu = e.student;
            var item = e.item;
            var common = e.common;
            var camp = e.camp;
            var i = 0;
            var memo = e.memo;
            for(x in stu){
                var url = camp.cover;
                var html = '    <div class="box box-body chart_container" id="" stu_name="'+stu[x].ch_name+'-'+stu[x].en_name+'" style="width:210mm;padding:0 !important;margin: 0 auto;position:fixed;left:0;top:0;">\n' +
                    '    </div>';
                $('body').append(html);

                var html = '<div id="page0-'+i+'" style="width:210mm;height:297mm;background:url('+url+') no-repeat;background-size:210mm 297mm;margin:0;padding:0;">';
                html += '<div style="padding-left: 61mm;padding-top:213mm;color: '+e.color.text+';;font-size: 6.5mm;font-family:PingFangSC-Semibold;line-height:13mm;">';
                html += '<div>'+stu[x].ch_name+'</div><div>'+stu[x].en_name+'</div><div>'+e.camp_name+'</div><div>'+e.tutor+'</div></div>';
                html += '</div>';
                $('.chart_container').last().append(html);

                var j = 0;
                for(t in item){
                    url = camp.background;
                    if(j % 2 == 0){
                        html = '<div id="page'+(Math.floor(j/2)+1)+'-'+i+'" style="width:210mm;height:297mm;background:url('+url+') no-repeat;background-size:210mm 297mm;margin:0;padding:0;"></div>';
                        $('.chart_container').last().append(html);
                    }
                    if(item[t].type == 3){
                        html = '<div>\n' +
                            '    <div class="headDiv"></div>\n' +
                            '    <div id="div1" class="DivS_1"></div>\n' +
                            '    <div id="div2" class="DivS_2"></div>\n' +
                            '    <div id="div3" class="DivS_3"></div>\n' +
                            '    <div class="temp"><textarea type="text" class="area" id="area1"></textarea></div>\n' +
                            '</div>';
                        $('#page'+(Math.floor(j/2)+1)+'-'+i).append(html);
                        var dom1 = document.getElementById("div1");
                        var myChart1 = echarts.init(dom1);
                        var data = [];
                        var tag = 0;

                        data.push(stu[x][t].rate);
                        data.push(common['small_'+t]);
                        data.push(common['big_'+t]);

                        var name = item[t].name;
                        option = {
                            legend: {
                                textStyle:{
                                    color:e.color.text
                                },
                            },
                            tooltip: {},
                            title: {
                                text:name,
                                textStyle:{
                                    color:e.color.text
                                },
                            },
                            xAxis: {
                                type: 'category',
                                axisLine: {
                                    lineStyle: {
                                        type: 'solid',
                                        color: e.color.axis,//左边线的颜色
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: e.color.text,//坐标值得具体的颜色

                                    }
                                }
                            },
                            yAxis: {
                                axisLine: {
                                    lineStyle: {
                                        type: 'solid',
                                        color: e.color.axis,//左边线的颜色
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: e.color.text,//坐标值得具体的颜色

                                    }
                                },
                                splitLine:{
                                    lineStyle:{
                                        color:e.color.split
                                    }
                                }
                            },
                            color:e.color.image,
                            series: [
                                {type: 'bar',label: {normal: {
                                            show: true,
                                            position: 'top',
                                            color:e.color.image_display,
                                            formatter: '{a}\n{c}',
                                            fontSize: 16,
                                        }},data:[data[0]],name:'个人'},
                                {type: 'bar',label: {normal: {
                                            show: true,
                                            position: 'top',
                                            color:e.color.image_display,
                                            formatter: '{a}\n{c}',
                                            fontSize: 16,
                                        }},data:[data[1]],name:'小营'},
                                {type: 'bar',label: {normal: {
                                            show: true,
                                            position: 'top',
                                            color:e.color.image_display,
                                            formatter: '{a}\n{c}',
                                            fontSize: 16,
                                        }},data:[data[2]],name:'大营'}
                            ]
                        };
                        myChart1.setOption(option);


                        data = [];

                        if(item[t].multi == 1){
                            var title = [];
                            for(d=1;d<=Object.keys(common['big_'+t+'_score']).length;d++){
                                title.push('第'+d+'次');
                            }
                            option = {
                                title: {
                                    text: name,
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                color:e.color.image,
                                legend: {
                                    data:['个人','小营','大营'],
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                grid: {},
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data:title,
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    },
                                    splitLine:{
                                        lineStyle:{
                                            color:e.color.split
                                        }
                                    }
                                },
                                series: [
                                    {
                                        name:'个人',
                                        type:'line',
                                        data:Object.keys(stu[x][t].all).map(function (key) {
                                            return stu[x][t].all[key];
                                        }),
                                        itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                                        lineStyle : {normal:{width:3}}
                                    },
                                    {
                                        name:'小营',
                                        type:'line',
                                        data:Object.keys(common['small_'+t+'_score']).map(function (key) {
                                            return common['small_'+t+'_score'][key];
                                        }),
                                        itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                                        lineStyle : {normal:{width:3}}
                                    },
                                    {
                                        name:'大营',
                                        type:'line',
                                        data:Object.keys(common['big_'+t+'_score']).map(function (key) {
                                            return common['big_'+t+'_score'][key];
                                        }),
                                        itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                                        lineStyle : {normal:{width:3}}
                                    }
                                ]
                            };
                        }else{
                            data.push(stu[x][t].avg);
                            data.push(common['small_'+t+'_avg']);
                            data.push(common['big_'+t+'_avg']);
                            option = {
                                legend: {
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                tooltip: {},
                                title: {
                                    text:name,
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                xAxis: {
                                    type: 'category',
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    }
                                },
                                yAxis: {
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    },
                                    splitLine:{
                                        lineStyle:{
                                            color:e.color.split
                                        }
                                    }
                                },
                                color:e.color.image,
                                series: [
                                    {type: 'bar',label: {normal: {
                                                show: true,
                                                position: 'top',
                                                color:e.color.image_display,
                                                formatter: '{a}\n{c}',
                                                fontSize: 16,
                                            }},data:[data[0]],name:'个人'},
                                    {type: 'bar',label: {normal: {
                                                show: true,
                                                position: 'top',
                                                color:e.color.image_display,
                                                formatter: '{a}\n{c}',
                                                fontSize: 16,
                                            }},data:[data[1]],name:'小营'},
                                    {type: 'bar',label: {normal: {
                                                show: true,
                                                position: 'top',
                                                color:e.color.image_display,
                                                formatter: '{a}\n{c}',
                                                fontSize: 16,
                                            }},data:[data[2]],name:'大营'}
                                ]
                            };
                        }
                        var dom2 = document.getElementById("div2");
                        var myChart2 = echarts.init(dom2);
                        myChart2.setOption(option);

                        if(typeof(stu[x][t].rate_memo) != "undefined"){
                            $('#div3').text(stu[x][t].rate_memo);
                        }else{
                            $('#div3').text(stu[x][t].score_memo);
                        }

                        if(memo != null && typeof(memo[j]) != "undefined" && memo[j] != "undefined"){
                            $('#area1').text(memo[j]);
                        }
                        $('#div1').removeAttr('id');
                        $('#div2').removeAttr('id');
                        $('#div3').removeAttr('id');
                        $('#area1').removeAttr('id');
                    }else{
                        html = '<div style="">\n' +
                            '    <div class="headDiv"></div>\n' +
                            '    <div id="div1" class="DivF1"></div>\n' +
                            '    <div id="div2" class="DivF2"></div>\n' +
                            '    <div class="temp"><textarea type="text" class="area" id="area1"></textarea></div>\n' +
                            '</div>';
                        $('#page'+(Math.floor(j/2)+1)+'-'+i).append(html);
                        var dom1 = document.getElementById("div1");
                        var myChart1 = echarts.init(dom1);
                        var data = [];
                        var tag = 0;
                        if(item[t].type == 1){
                            data.push(stu[x][t].rate);
                            data.push(common['small_'+t]);
                            data.push(common['big_'+t]);
                        }else{
                            if(item[t].multi == 1){
                                tag = 1;
                            }else{
                                data.push(stu[x][t].avg);
                                data.push(common['small_'+t+'_avg']);
                                data.push(common['big_'+t+'_avg']);
                            }
                        }
                        var name = item[t].name;
                        if(tag == 1){
                            var title = [];
                            for(d=1;d<=Object.keys(common['big_'+t+'_score']).length;d++){
                                title.push('第'+d+'次');
                            }
                            option = {
                                title: {
                                    text: name,
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['个人','小营','大营'],
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                color:e.color.image,
                                grid: {},
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data:title,
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    },
                                    splitLine:{
                                        lineStyle:{
                                            color:e.color.split
                                        }
                                    }
                                },
                                series: [
                                    {
                                        name:'个人',
                                        type:'line',
                                        data:Object.keys(stu[x][t].all).map(function (key) {
                                            return stu[x][t].all[key];
                                        }),
                                        itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                                        lineStyle : {normal:{width:3}}
                                    },
                                    {
                                        name:'小营',
                                        type:'line',
                                        data:Object.keys(common['small_'+t+'_score']).map(function (key) {
                                            return common['small_'+t+'_score'][key];
                                        }),
                                        itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                                        lineStyle : {normal:{width:3}}
                                    },
                                    {
                                        name:'大营',
                                        type:'line',
                                        data:Object.keys(common['big_'+t+'_score']).map(function (key) {
                                            return common['big_'+t+'_score'][key];
                                        }),
                                        itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                                        lineStyle : {normal:{width:3}}
                                    }
                                ]
                            };
                        }else{
                            option = {
                                legend: {
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                tooltip: {},
                                title: {
                                    text:name,
                                    textStyle:{
                                        color:e.color.text
                                    },
                                },
                                color:e.color.image,
                                xAxis: {
                                    type: 'category',
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    }
                                },
                                yAxis: {
                                    axisLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: e.color.axis,//左边线的颜色
                                        }
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: e.color.text,//坐标值得具体的颜色

                                        }
                                    },
                                    splitLine:{
                                        lineStyle:{
                                            color:e.color.split
                                        }
                                    }
                                },
                                series: [
                                    {type: 'bar',label: {normal: {
                                                show: true,
                                                position: 'top',
                                                color:e.color.image_display,
                                                formatter: '{a}\n{c}',
                                                fontSize: 16,
                                            }},data:[data[0]],name:'个人'},
                                    {type: 'bar',label: {normal: {
                                                show: true,
                                                position: 'top',
                                                color:e.color.image_display,
                                                formatter: '{a}\n{c}',
                                                fontSize: 16,
                                            }},data:[data[1]],name:'小营'},
                                    {type: 'bar',label: {normal: {
                                                show: true,
                                                position: 'top',
                                                color:e.color.image_display,
                                                formatter: '{a}\n{c}',
                                                fontSize: 16,
                                            }},data:[data[2]],name:'大营'}
                                ]
                            };
                        }

                        myChart1.setOption(option);
                        if(typeof(stu[x][t].rate_memo) != "undefined"){
                            $('#div2').text(stu[x][t].rate_memo);
                        }else{
                            $('#div2').text(stu[x][t].score_memo);
                        }
                        if(memo != null && typeof(memo[j]) != "undefined" && memo[j] != "undefined"){
                            $('#area1').text(memo[j]);
                        }
                        $('#div1').removeAttr('id');
                        $('#div2').removeAttr('id');
                        $('#area1').removeAttr('id');
                    }
                    j++;
                }
                i++;
            }


            setTimeout(function(){
                var list = $('.chart_container');
                for(let d=0;d<list.length;d++){
                    down_pdf(list[d]);
                }
            },5000);
            //$('#loadingModal').modal('hide');
        });
    });

/*    function down_pdf()
    {
        var  chart_container = document.getElementById('chart_container');
        //console.log(chart_container);
        html2canvas(chart_container, {allowTaint:true}).then(function(canvas) {

            contentWidth = canvas.width;
            contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            //var pageHeight = contentWidth / 592.28 * 841.89;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 655;
            var imgHeight = 603.8 / contentWidth * contentHeight;
            //canvas.getContext("2d").translate(-500,-20);
            var pageData = canvas.toDataURL('image/jpeg', 0.95);
            //console.log(pageData);
            //注①
            var pdf = new jsPDF('', 'pt', 'a4');
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {
                while (leftHeight > 0) {
                    //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if (leftHeight > 100) {
                        //注②
                        pdf.addPage();
                    }
                }
            }
            pdf.save('report.pdf');
        });
    };*/

    function down_pdf(div1){
        var contentWidth = 0;
        var contentHeight = 0;
        var w = parseInt(window.getComputedStyle(div1).width);
        var h = parseInt(window.getComputedStyle(div1).height);
        var canvas1 = document.createElement("canvas");
        //canvas1.getContext("2d").translate(20, 0);
        canvas1.getContext("2d").scale(1, 1);
        canvas1.style.width=w+'mm';
        canvas1.style.height=h+'mm';
        canvas1.width=w;
        canvas1.height=h;


        html2canvas(div1, {canvas:canvas1,allowTaint:true}).then(function(canvas) {
            contentWidth = canvas.width;
            contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 604.375 / contentWidth * contentHeight;
            //canvas.getContext("2d").translate(-500,-20);
            var pageData = canvas.toDataURL('image/jpeg', 0.95);
            //console.log(pageData);
            //注①
            var pdf = new jsPDF('', 'pt', 'a4');
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {
                while (leftHeight > 0) {
                    //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if (leftHeight > 100) {
                        //注②
                        pdf.addPage();
                    }
                }
            }

            pdf.save(div1.getAttribute('stu_name')+'.pdf');
        });

        return 1;
    }

    function sleep(delay) {
        var start = (new Date()).getTime();
        while ((new Date()).getTime() - start < delay) {
            continue;
        }
    }


    // $(function(){
    //     $('#memo').keyup(function(){
    //         var txtLeng = $('#memo').val().length;
    //         if( txtLeng>160){//判断字体是否超出界限
    //             var fontsize = $('#memo').val().substring(0,160);
    //             $('#memo').val( fontsize );
    //         }else{
    //             $('.nlysrzs').text(txtLeng);//
    //             $('.nlzzts').text(160);//剩余文字个数
    //         }
    //     });
    // });

    // $('#btn_save').on('click',function(){
    //     var request = {};

    //     request.pid = $('#hid_div').attr('pid');
    //     request.memo1 = $('#area-1').val();
    //     request.memo2 = $('#area-2').val();
    //     request.memo3 = $('#area-3').val();
    //     request.memo4 = $('#area-4').val();
    //     request.memo5 = $('#area-5').val();
    //     request.memo6 = $('#area-6').val();

    //     $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
    //     $.post('/admin/report/save_memo',request,function(e){
    //         alert('保存成功');
    //     });
    // });


    // function memo(){
    //     var request = {pid:$('#hid_div').attr('pid')}
    //     $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
    //     $.post('get_memo',request,function(e){
    //         if(e == ''){
    //             return;
    //         }else{
    //             var memo = JSON.parse(e);
    //             $('#area-1').val(memo.memo1);
    //             $('#area-2').val(memo.memo2);
    //             $('#area-3').val(memo.memo3);
    //             $('#area-4').val(memo.memo4);
    //             $('#area-5').val(memo.memo5);
    //             $('#area-6').val(memo.memo6);
    //         }
    //     });
    // }

    function dealImage(base64, w,callback) {
        var newImage = new Image();
        var quality = 1;    //压缩系数0-1之间
        newImage.src = base64;
        newImage.setAttribute("crossOrigin", 'Anonymous');  //url为外域时需要
        var imgWidth, imgHeight;
        newImage.onload = function () {
            imgWidth = this.width;
            imgHeight = this.height;
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            if (Math.max(imgWidth, imgHeight) > w) {
                if (imgWidth > imgHeight) {
                    canvas.width = w * 3;
                    canvas.height = w * imgHeight / imgWidth *3;
                } else {
                    canvas.height = w*3;
                    canvas.width = w * imgWidth / imgHeight *3;
                }
            } else {
                canvas.width = imgWidth*3;
                canvas.height = imgHeight*3;
                quality = 1;
            }
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            var base64_new = canvas.toDataURL("image/jpeg", quality); //压缩语句
            // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
            // while (base64.length / 1024 > 150) {
            //  quality -= 0.01;
            //  base64 = canvas.toDataURL("image/jpeg", quality);
            // }
            // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
            // while (base64.length / 1024 < 50) {
            //  quality += 0.001;
            //  base64 = canvas.toDataURL("image/jpeg", quality);
            // }
            callback(base64_new);
        }
    }

    function put_arr(base64){
        urlArr.push(base64);
    }
</script>






